<route lang="json5">
{
  style: {
    navigationBarTitleText: '活动',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="page">

    <!-- 排序切换 -->
    <view class="tabs">
      <view
        v-for="t in tabs"
        :key="t.value"
        class="tab"
        :class="{ active: sortBy === t.value }"
        @click="switchSort(t.value)"
      >{{ t.label }}</view>
    </view>

    <!-- 列表 -->
    <scroll-view
      class="list"
      scroll-y
      :refresher-enabled="true"
      :refresher-triggered="refresher"
      refresher-background="#f7f8fa"
      @refresherrefresh="onRefresh"
      @scrolltolower="onLoadMore"
    >
      <view v-for="a in activities" :key="a.id" class="card" @click="openDetail(a.id)">
        <image :src="a.cover" mode="aspectFill" class="cover" />
        <view class="meta">
          <view class="title">{{ a.title }}</view>
          <view class="row">
            <text class="tag">截止时间 {{ formatDate(a.stop_tim) }}</text>
            <text class="sep">·</text>
            <text class="loc">活动地点 {{ a.address }}</text>
            <text class="sep">·</text>
            <text class="loc">活动地址 {{ a.address }}</text>
          </view>
          <view class="row2">
            <text>👥 {{ a.signedCount }}/{{ a.quota }}</text>
            <text class="heat">🔥 {{ a.heat }}</text>
          </view>
        </view>
      </view>

      <!-- <view class="footer">
        <text v-if="loading">加载中…</text>
        <text v-else-if="!hasMore && activities.length">没有更多了</text>
        <text v-else-if="!activities.length">暂无活动</text>
      </view> -->

      <view class="footer">
        <text v-if="loading">加载中…</text>
        <text v-else-if="!hasMore && activities.length">没有更多了</text>
        <text v-else-if="!activities.length">暂无活动</text>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { listActivities, type Activity } from '@/mock/activity'

const { safeAreaInsets } = uni.getSystemInfoSync()

const tabs = [
  { label: '最新', value: '2' as const },
  { label: '热门', value: '3' as const }
]
const sortBy = ref<'2' | '3'>('2')

const activities = ref<Activity[]>([])
const page = ref(1)
const pageSize = 8
const hasMore = ref(true)
const loading = ref(false)
const refresher = ref(false)

function formatDate(ts: number) {
  const d = new Date(ts)
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hh = String(d.getHours()).padStart(2, '0')
  const mm = String(d.getMinutes()).padStart(2, '0')
  return `${d.getFullYear()}-${m}-${day} ${hh}:${mm}`
}

async function fetch(reset = false) {
  // if (loading.value) return
  // loading.value = true
  try {
    console.log('=========3=======')
    const p = reset ? 1 : page.value
    const { list, more } = await listActivities(sortBy.value, p, pageSize)
    if (reset) activities.value = list
    else activities.value = activities.value.concat(list)
    hasMore.value = more
    page.value = p + 1
  } finally {
    // loading.value = false
    if (refresher.value) refresher.value = false
  }
}

function switchSort(s: '2' | '3') {
  console.log('=========1=======')
  if (sortBy.value === s) return
    sortBy.value = s
    page.value = 1
    hasMore.value = true
    activities.value = [] 
    // loading.value = true  
  console.log('=========2=======')
  onRefresh() 
}

function onRefresh() {
  refresher.value = true
  page.value = 1
  hasMore.value = true
  fetch(true)
}

function onLoadMore() {
  // if (!hasMore.value || loading.value) return
  fetch(false)
}

function openDetail(id: number) {
  uni.navigateTo({ url: `/pages/activity/detail?id=${id}` })
}

onMounted(() => {
  fetch(true)
})
</script>

<style lang="scss" scoped>
.page { background: #f7f8fa; }
.nav { height: 48px; display: flex; align-items: center; padding: 0 12px; }
.title { font-weight: 700; font-size: 18px; }
.tabs { display: flex; gap: 8px; padding: 5px 12px 8px; }
.tab { padding: 6px 10px; border-radius: 9999px; background: #eef1f5; font-size: 14px; color: #556; }
.tab.active { background: #2563eb; color: #fff; }
.list { height: calc(100vh - 99px); }
.card {
  margin: 10px 12px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.cover { width: 100%; height: 140px; display: block; }
.meta { padding: 10px 12px; }
.meta .title { font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.row, .row2 { display: flex; align-items: center; gap: 6px; color: #667085; font-size: 12px; }
.tag { background: #f2f4f7; padding: 2px 6px; border-radius: 999px; }
.sep { opacity: .5; }
.row2 { justify-content: space-between; margin-top: 6px; color: #475467; }
.heat { font-weight: 600; }
.footer { text-align: center; color: #98a2b3; padding: 12px 0 20vh; font-size: 12px; }
</style>
